<template>
  <div class="demo">
    <div class="demo-title">高级用法</div>
    <div class="demo-content">
      <Transfer
        v-model:target-keys="targetKeys"
        :data-source="mockData"
        show-search
        :list-style="{ width: '250px', height: '300px' }"
        :operations="['to right', 'to left']"
        :render="(item) => `${item.title}-${item.description}`"
        @change="handleChange"
      >
        <template #footer="{ direction }">
          <Button
            v-if="direction === 'left'"
            size="small"
            style="float: left; margin: 5px"
            @click="getMock"
          >
            left reload
          </Button>
          <Button
            v-else-if="direction === 'right'"
            size="small"
            style="float: right; margin: 5px"
            @click="getMock"
          >
            right reload
          </Button>
        </template>
        <template #notFoundContent>
          <span>没数据</span>
        </template>
      </Transfer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import Button from '@sscd/button';
  import Transfer from '@sscd/transfer';
  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }
  const mockData = ref<MockData[]>([]);
  const targetKeys = ref<string[]>([]);
  const getMock = () => {
    const keys: string[] = [];
    const mData: MockData[] = [];
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        keys.push(data.key);
      }
      mData.push(data);
    }
    mockData.value = mData;
    targetKeys.value = keys;
  };
  onMounted(() => getMock());
  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
</script>
